<template>
<div>
<input type="text" v-model="newTodoTitle">
<button @click="addTodo">添加</button>
<div v-for="(todo, index) in todos" :key="index">
<todo-item :title="todo.title" :completed="todo.completed" @update:completed="updateTodoCompleted(index, $event)" @remove-todo="removeTodo(index)"></todo-item>
</div>
</div>
</template>

<script>
import TodoItem from './TodoItem.vue';

export default {
data() {
return {
todos: [],
newTodoTitle: ''
}
},
components: {
TodoItem
},
methods: {
addTodo() {
if (this.newTodoTitle.trim() !== '') {
this.todos.push({ title: this.newTodoTitle, completed: false });
this.newTodoTitle = '';
}
},
removeTodo(index) {
this.todos.splice(index, 1);
},
updateTodoCompleted(index, completed) {
this.todos[index].completed = completed;
}
}
}
</script>